import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import "./PersonalCenter.css";
import PersonalInfo from '../components/PersonalInfo';
import ApplicationList from '../components/ApplicationList';
// import AdoptedPet from '../components/AdoptedPet';
// 解构 Ant Design 的布局组件
const { Sider, Content } = Layout;

function PersonalCenter() {
  // 状态管理
  const [selectedKeys2, setSelectedKeys2] = useState(['1']);
  const [openKeys, setOpenKeys] = useState(['sub1']);
  const [content, setContent] = useState(<div>默认内容</div>); // 用于存储动态内容

  // 菜单点击事件
  const onMenuClick = ({ key }) => {
    setSelectedKeys2([key]);
    // 根据点击的菜单项设置内容
    switch (key) {
      case '1':
        setContent(<div><PersonalInfo/></div>);
        break;
      case '2':
        setContent(<div><ApplicationList/></div>);
        break;
      case '3':
        setContent(<div></div>);
        break;
      case '4':
        setContent(<div>option4 内容</div>);
        break;
      case '5':
        setContent(<div>option5 内容</div>);
        break;
      case '6':
        setContent(<div>option6 内容</div>);
        break;
      case '7':
        setContent(<div>option7 内容</div>);
        break;
      case '8':
        setContent(<div>option8 内容</div>);
        break;
      case '9':
        setContent(<div>option9 内容</div>);
        break;
      case '10':
        setContent(<div>option10 内容</div>);
        break;
      case '11':
        setContent(<div>option11 内容</div>);
        break;
      case '12':
        setContent(<div>option12 内容</div>);
        break;
      default:
        setContent(<div>默认内容</div>);
    }
  };

  // 子菜单展开/关闭事件
  const onSubMenuOpenChange = (openKeys) => {
    setOpenKeys(openKeys);
  };

  // 定义菜单项
  const menuItems = [
    {
      key: 'sub1',
      icon: <UserOutlined />,
      label: '用户',
      children: [
        { key: '1', label: '个人信息' },
        { key: '2', label: '申请意见' },
        { key: '3', label: '已领养宠物' },
        // { key: '4', label: 'option4' },
      ],
    },
    {
      key: 'sub2',
      icon: <LaptopOutlined />,
      label: '交流',
      children: [
        { key: '5', label: 'option5' },
        { key: '6', label: 'option6' },
        { key: '7', label: 'option7' },
        { key: '8', label: 'option8' },
      ],
    },
    {
      key: 'sub3',
      icon: <NotificationOutlined />,
      label: '通知',
      children: [
        { key: '9', label: 'option9' },
        { key: '10', label: 'option10' },
        { key: '11', label: 'option11' },
        { key: '12', label: 'option12' },
      ],
    },
  ];

  // 定义面包屑项
  const breadcrumbItems = [
    // { title: 'Home' },
    // { title: 'List' },
    // { title: 'App' },
  ];

  return (
    <Layout className="layout" style={{ minHeight: '100vh' }}>
      <Sider width={200} style={{ background: '#fff' }}>
        <Menu
          mode="inline"
          items={menuItems}
          selectedKeys={selectedKeys2}
          openKeys={openKeys}
          onOpenChange={onSubMenuOpenChange}
          onClick={onMenuClick}
          style={{ height: '100%', borderRight: 0 }}
        />
      </Sider>
      <Layout style={{ padding: '0 24px 24px' }}>
        <Breadcrumb items={breadcrumbItems} style={{ margin: '16px 0' }} />
        <Content
          style={{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }}
        >
          {content} {/* 动态内容 */}
        </Content>
      </Layout>
    </Layout>
  );
}

export default PersonalCenter;